<template>
    <div>
        <div class="body">
          <ul>
              <li v-for="(item,index) in datas" @click="itemclick(index)">
                  <img class="select-item-image" v-if="selectindex==index" src="../assets/images/select.png"/>
                  <span class="select-item-span"  v-bind:class="{'select-item':selectindex==index}">
                      {{item.name}}</span>
              </li>
          </ul>
        </div>
        <appfooter></appfooter>
    </div>
</template>
<script>
    import Vue from 'vue';
    import appheader from '../components/appheader';
    import appfooter from '../components/appfooter'
    export default {
        data () {
            return {
                selectindex:0,
                datas:[
                    {
                        id:1,
                        name:"所有片区",
                    },
                    {
                        id:2,
                        name:"招商片区",
                    }, {
                        id:3,
                        name:"蓝宝石片区",
                    }, {
                        id:4,
                        name:"时代金融片区",
                    }, {
                        id:5,
                        name:"招商片区",
                    }, {
                        id:6,
                        name:"上海中心片区",
                    }, {
                        id:7,
                        name:"国金片区",
                    }, {
                        id:7,
                        name:"正大片区",
                    }, {
                        id:7,
                        name:"证劵片区",
                    }
                ],
                user:{
                    usertype:"",
                    order:""
                }
            }
        },
        methods: {
            itemclick:function (index) {
                this.selectindex=index;
                var id=this.$route.params['id'];
                this.$router.push({name:'list',params:{
                    'userid':id
                }})
            }
        },
        mounted () {
        },
        components: {
            'appheader':appheader,
            'appfooter':appfooter
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>

.body{
    margin-bottom: 20px;
  ul{
      li{
          font-size: 14px;
          color: white;
          margin-left:20px;
          border-bottom: 2px #A4B4BB solid;
          margin-top: 14px;
          opacity: 0.8;
          padding-bottom: 5px;
          .select-item-image{
              width: 15px;
              height: 15px;
          }
      }
  }
    .select-item{
        color: #e9b150;
    }


}


</style>